<template>
    <div class="article-page">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>面经后台</el-breadcrumb-item>
        <el-breadcrumb-item>面经管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card shadow="never" border="false">
        <template #header>
          <div class="header">
            <span>{{ pageTotal }}</span>
            <el-button
              icon="el-icon-plus"
              size="small"
              type="primary"
              @click="openDrawer('add')"
              round>
              添加面经
            </el-button>
          </div>
        </template>
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="stem" label="标题" width="400">
            </el-table-column>
            <el-table-column prop="creator" label="作者"> </el-table-column>
            <el-table-column prop="likeCount" label="点赞"> </el-table-column>
            <el-table-column prop="views" label="浏览量"> </el-table-column>
            <el-table-column prop="createdAt" label="更新时间" width="200">
            </el-table-column>
            <el-table-column label="操作" width="120px">
              <template #default="{ row }">
                <div class="actions">
                  <i class="el-icon-view" @click="openDrawer('preview',row.id)"></i>
                  <i class="el-icon-edit-outline" @click="openDrawer('edit',row.id)"></i>
                  <i class="el-icon-delete" @click="del(row.id)"></i>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="total"
          >
        </el-pagination>
      </el-card>

    <el-drawer
      :visible.sync="isShowDrawer"
      :before-close="handleClose"
      :title="drawerTitle"
      direction="rtl"
      size="60%"
    >
    <div v-if="drawerType === 'preview'" class="article-preview">
      <h5>{{ form.stem }}</h5>
      <div v-html="form.content"></div>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="stem">
          <el-input v-model="form.stem" placeholder="输入面经标题"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <quill-editor v-model="form.content" @blur="$refs.form.validateField('content')"></quill-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确认</el-button>
          <el-button>取消</el-button>
        </el-form-item>
    </el-form>

    </el-drawer>
</div>
</template>
  
  <script>
  // require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { getArticleList,updateArticle,createArticle,removeArticle,getArticleDetail } from '@/api/article'
  export default {
      name: 'article-page',
      data() {
          return {
              list: [],
              current: 2,
              pageSize: 10,
              pageTotal: 10,
              total: 10,
              isShowDrawer:false,
              drawerType:'',
              form:{
                stem:'',
                content:''
              },
              rules:{
              stem: [{required:true,message:'请输入面经标题',trigger:blur}],
              content:[{required:true,message:'请输入面经内容',trigger:blur}]
              },
            }
      },
 
    components: {
        quillEditor
    },
      created() {
          this.getDatas()
          // this.createArticle()
      },
      computed:{
        drawerTitle() {
            let title = '大标题'
            if(this.drawerType === 'add' ) title = '添加面经'
            if(this.drawerType === 'preview') title = '面经预览'
            if(this.drawerType === 'edit') title = '修改面经'
            return title
        }
      },
      methods: {
        handleClose() {
           // 将form也手动重置
        this.form = {
          stem: '', // 标题
          content: '' // 内容
        }
        if (this.drawerType !== 'preview') {
          // add edit 调用 resetFields 在此处的作用: 重置校验状态
          this.$refs.form.resetFields()
        }
        this.$refs.form.resetFields()
        this.isShowDrawer = false
      },
      async submit () {
  try {
    // 校验表单
    await this.$refs.form.validate()
    // 如何区分, 当前是 编辑 还是 添加
    if (this.drawerType === 'add') {
      // 发送请求
      await createArticle(this.form)
      // 添加提示 $message.success
      this.$message.success('添加成功')
    }
    if (this.drawerType === 'edit') {
      // 发送的是编辑的请求
      const { id, stem, content } = this.form
      await updateArticle({ id, stem, content })
      this.$message.success('修改成功')
    }
    // 无论是修改还是添加, 都会回到第一页, 重置页码
    this.current = 1
    // 重新渲染
    this.getDatas()
    // 关闭弹框
    this.handleClose()
  } catch (e) {
    console.log(e)
  }
},
          async getDatas() {
              const res = await getArticleList({
                  current: this.current,
                  pageSize: this.pageSize
              })
              this.pageTotal = res.data.total
              this.list = res.data.rows
              console.log(res);
          },

          async del(id) {
        // 删除请求
        await removeArticle(id)
        // 添加成功的提示
        this.$message.success('删除成功')

        // 处理删除当前页的最后一条
        if (this.tableData.length === 1 && this.current > 1) {
          this.current--
        }
        // 重新渲染
        this.getDatas()
      },
          handleCurrentChange(val) {
              this.current = val
              // 重新刷新列表
              this.getDatas()
          },
      async openDrawer(type, id) {
        // console.log(type, id)
        this.drawerType = type
        this.isShowDrawer = true

        if (type !== 'add') {
          const res = await getArticleDetail(id)
          this.form = {
            ...res.data
          }
        }
      },

      }
  }
  </script>
  
  <style lang="scss" scoped>
  .el-card {
    margin-top: 25px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 16px;
    }
    .actions {
      font-size: 18px;
      display: flex;
      justify-content: space-around;
      color: #666;
      > i:hover {
        color: rgba(114, 124, 245, 1);
        cursor: pointer;
      }
    }
  }
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .el-breadcrumb {
    margin-top: 10px;
  }
  .el-form {
    padding-right: 40px;
  }
  .quill-editor {
    ::v-deep .ql-editor {
      height: 300px;
    }
  }
  .el-rate {
    padding: 10px 0;
  }
  .article-preview {
    padding: 0 40px 40px 40px;
    > h5 {
      font-size: 20px;
      color: #666;
      border-bottom: 1px dashed #ccc;
      padding-bottom: 30px;
      margin: 0 0 20px 0;
    }
  }
  </style>
  